<template>
  <div class="login">
    <div class="login_top">
      <div class="left">
        <span class="iconfont icon-guanbi"></span>
        <span>帐号登录</span>
      </div>
    </div>

    <div class="img">
      <img
        src="https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/header/logo.acc780e7a19f22c1d8e89805488fcfef.png"
        alt=""
      />
    </div>

    <div class="phone">
      <span class="iconfont icon-zhanghao"></span>
      <input type="text" placeholder="请输入手机号码" v-model="phone" />
    </div>

    <div class="possword">
      <span class="iconfont icon-mima"></span>
      <input type="password" placeholder="请输入密码" v-model="password" />
    </div>

    <div class="register" @click="submit">
      <p>登录</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  methods: {
    submit() {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      let pass = /^[a-zA-Z0-9]\w{8,17}$/;
      if (!reg.test(this.phone) || !pass.test(this.password)) {
        this.$toast("请输入正确手机号码与密码");
        return;
      }
      window.localStorage.setItem("token", "token值");
      window.localStorage.setItem("userId", "13123123");
      this.$toast("登陆成功");
      this.$router.push("/user");
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  p {
    padding: 0 60px;
    height: 39px;
    line-height: 39px;
    background-color: #ffa200;
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
    border-radius: 28px;
  }
}

.login_top {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    font-size: 20px;
    font-weight: 600;
    span {
      &:nth-child(2) {
        margin-left: 10px;
      }
    }
  }
  .right {
    font-size: 18px;
  }
}

.img {
  margin: 60px 0;
  img {
    margin: 0 auto;
  }
}

.phone,
.possword {
  margin: 0 15px;
  display: flex;
  border-bottom: 1px solid #ffa200;
  align-items: center;
  span {
    margin-right: 9px;
    font-size: 24px;
    color: #ffa200;
  }
  input {
    width: 100%;
    border: 0;
    flex: 1;
    font-size: 14px;
    color: #ffa200;
    padding: 15px 0;
  }
}
</style>
